<?php
use app\common\model\Category;
?>
	{layout name="layout/layout" /}
	<style>
		img {
			margin: 5px;
		}
	</style>

	<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
		<ul class="layui-tab-title">
			<li class="layui-this">vip权益管理-添加</li>
		</ul>
	</div>
	<form class="layui-form1" action="{:Url('admin/privilege/store')}" method="post" id="form" onsubmit="return mySubmit();"
	 enctype="multipart/form-data" class="slideForm">
		<div class="layui-form-item">
			<label class="layui-form-label">权益名称</label>
			<div class="layui-input-block">
				<input oninput="ee()" id="title" class="layui-input" type="text" name="title" />
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">权益内容</label>
			<div class="layui-input-block">
				<input oninput="ee()" id="" class="layui-input" type="text" name="content" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图片</label>
			<div class="layui-input-block">
				<a href="javascript:;" style="background-color: #009688;color: #fff;width: 65px;height: 30px;display: block; font-size: 16px;line-height: 30px;margin-bottom: 5px;padding-left: 5px;padding-right: 5px;;">上传图片
					<input type="file" name="file" id="doc" multiple="multiple" style="width: 70px;margin-bottom: 10px;opacity: 0;left: -2px;top: 0px;position: absolute;border: 1px solid red;"
					 onchange="javascript:setImagePreviews();" accept="image/*" />
				</a>
				<!-- <input type="file" name="file" id="doc" multiple="multiple" onchange="javascript:setImagePreviews();" accept="image/*" /> -->
				<div id="dd" style="display: flex;flex-wrap: wrap;">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="submit" class="layui-btn" value="保存" />
			</div>
		</div>
	</form>




	<script type="text/javascript">

		//下面用于多图片上传预览功能

		function setImagePreviews(avalue) {

			var docObj = document.getElementById("doc");

			var dd = document.getElementById("dd");

			dd.innerHTML = "";

			var fileList = docObj.files;

			for (var i = 0; i < fileList.length; i++) {



				dd.innerHTML += "<div style='float:left' > <img id='img" + i + "'  /> </div>";

				var imgObjPreview = document.getElementById("img" + i);

				if (docObj.files && docObj.files[i]) {

					//火狐下，直接设img属性

					imgObjPreview.style.display = 'block';

					imgObjPreview.style.width = '150px';

					imgObjPreview.style.height = '180px';

					//imgObjPreview.src = docObj.files[0].getAsDataURL();

					//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

					imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);

				}

				else {

					//IE下，使用滤镜

					docObj.select();

					var imgSrc = document.selection.createRange().text;

					alert(imgSrc)

					var localImagId = document.getElementById("img" + i);

					//必须设置初始大小

					localImagId.style.width = "150px";

					localImagId.style.height = "180px";

					//图片异常的捕捉，防止用户修改后缀来伪造图片

					try {

						localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

						localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

					}

					catch (e) {

						alert("您上传的图片格式不正确，请重新选择!");

						return false;

					}

					imgObjPreview.style.display = 'none';

					document.selection.empty();

				}

			}



			return true;

		}



	</script> {load href="__MANAGE__/js/jquery-1.10.0.min.js"}
	<script>
		$(function () {
			function mySubmit(flag) {
				return flag;
			}
			$("#form").submit(function () {

				var title = $('#title').val();
				var content = $('#content').val();

				if (tel.title > 10) {
					alert('权益名不要超过10个字');
					return false;
				}

				if (content == "") {
					alert('权益内容不能为空');
					return false;
				}
			});
		})

		PostbirdImgGlass.init({
			domSelector: "#dd img",
			animation: true
		});
	</script>